<template>
  <div class="index-container">
    <el-drawer v-model="dialogFormVisible" size="60%" @close="close">
      <template #header>
        <h4>{{ title }}客户信息</h4>
      </template>

      <template #default>
        <div class="content">
          <el-form
            ref="formRef"
            label-width="80px"
            :model="baseForm"
            :rules="rules"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="来源" prop="sourcefrom">
                  <el-radio-group v-model="baseForm.sourcefrom">
                    <el-radio
                      v-for="(item, index) in sourcefromArr"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="称呼" prop="username">
                  <el-input v-model="baseForm.username" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机" prop="mobile">
                  <el-input v-model="baseForm.mobile" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信" prop="weixin">
                  <el-input v-model="baseForm.weixin" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="gander">
                  <el-radio-group v-model="baseForm.gender">
                    <el-radio
                      v-for="(item, index) in genderArr"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓名" prop="realname">
                  <el-input v-model="baseForm.realname" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="baseForm.birthday"
                    type="date"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身高" prop="height">
                  <el-input v-model="baseForm.height">
                    <template #append>cm</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体重" prop="weight">
                  <el-input v-model="baseForm.weight">
                    <template #append>kg</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚况" prop="marry">
                  <el-select v-model="baseForm.marry" placeholder="客户婚况">
                    <el-option
                      v-for="item in marryArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学历" prop="education">
                  <el-select
                    v-model="baseForm.education"
                    placeholder="客户学历"
                  >
                    <el-option
                      v-for="item in educationArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职业" prop="job">
                  <el-select v-model="baseForm.job" placeholder="客户职业">
                    <el-option
                      v-for="item in jobArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收入" prop="salary">
                  <el-select v-model="baseForm.salary" placeholder="客户收入">
                    <el-option
                      v-for="item in salaryArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="民族" prop="national">
                  <el-select v-model="baseForm.national" placeholder="客户民族">
                    <el-option
                      v-for="item in nationalArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现居地">
                  <el-cascader
                    ref="cascaderone"
                    v-model="areaOneArr"
                    :options="areaOptions"
                    :props="{ label: 'name', value: 'code' }"
                    style="width: 100%"
                    @change="handleChangeOne"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="户籍地">
                  <el-cascader
                    ref="cascadertwo"
                    v-model="areaTwoArr"
                    :options="areaOptions"
                    :props="{ label: 'name', value: 'code' }"
                    style="width: 100%"
                    @change="handleChangeTwo"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="购房" prop="house">
                  <el-select v-model="baseForm.house" placeholder="购房情况">
                    <el-option
                      v-for="item in houseArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="购车" prop="car">
                  <el-select v-model="baseForm.car" placeholder="购车情况">
                    <el-option
                      v-for="item in carArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="月花费" prop="spend">
                  <el-select v-model="baseForm.spend" placeholder="月花费情况">
                    <el-option
                      v-for="item in spendArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="吸烟" prop="smoking">
                  <el-select v-model="baseForm.smoking" placeholder="吸烟情况">
                    <el-option
                      v-for="item in smokingArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="喝酒" prop="drinking">
                  <el-select v-model="baseForm.drinking" placeholder="喝酒情况">
                    <el-option
                      v-for="item in drinkingArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="baseForm.remark"
                    type="textarea"
                    :rows="4"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div class="pay-button-group">
          <el-button type="primary" @click="submitForm('formRef')">
            保存
          </el-button>
          <el-button @click="resetForm('formRef')">重置</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
  import { doInsert } from '@/api/custom'
  import { translate } from '@/i18n'
  import { isPhone } from '@/utils/validate'
  export default defineComponent({
    name: 'CustomDrawer',
    props: {
      items: {
        type: Array,
        required: true,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const validatePhone = (rule, value, callback) => {
        if (!isPhone(value)) {
          callback(new Error(translate('请输入正确的手机号')))
        } else {
          callback()
        }
      }

      const state = reactive({
        formRef: null,
        cascaderone: '',
        cascadertwo: '',
        baseForm: {
          sourcefrom: 9,
          username: '',
          mobile: '',
          weixin: '',
          gender: 1,
        },
        sourcefromArr: [],
        genderArr: [],
        marryArr: [],
        educationArr: [],
        jobArr: [],
        salaryArr: [],
        nationalArr: [],
        houseArr: [],
        carArr: [],
        spendArr: [],
        smokingArr: [],
        drinkingArr: [],
        areaOneArr: [],
        areaTwoArr: [],
        areaOptions: props.items,
        rules: {
          username: [
            { required: true, trigger: 'change', message: '请填写客户姓名' },
          ],
          mobile: [
            { required: true, trigger: 'blur', message: '请填写客户电话' },
            { validator: validatePhone, trigger: 'blur' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const handleChangeOne = () => {
        const labArr = state.cascaderone.getCheckedNodes()[0].pathLabels
        const valArr = state.cascaderone.getCheckedNodes()[0].pathValues
        state.baseForm.province = valArr[0]
        state.baseForm.province_name = labArr[0]
        state.baseForm.city = valArr[1]
        state.baseForm.city_name = labArr[1]
        state.baseForm.area = valArr[2]
        state.baseForm.area_name = labArr[2]
      }

      const handleChangeTwo = () => {
        const labArr = state.cascadertwo.getCheckedNodes()[0].pathLabels
        const valArr = state.cascadertwo.getCheckedNodes()[0].pathValues
        state.baseForm.reside_province = valArr[0]
        state.baseForm.reside_province_name = labArr[0]
        state.baseForm.reside_city = valArr[1]
        state.baseForm.reside_city_name = labArr[1]
        state.baseForm.reside_area = valArr[2]
        state.baseForm.reside_area_name = labArr[2]
      }

      const showEdit = () => {
        state.title = '添加'
        const params = localStorage.getItem('params')
        const jsonParams = JSON.parse(params)
        state.sourcefromArr = Object.values(jsonParams.sourcefrom)
        state.genderArr = Object.values(jsonParams.gender)
        state.marryArr = Object.values(jsonParams.marry)
        state.educationArr = Object.values(jsonParams.education)
        state.jobArr = Object.values(jsonParams.job)
        state.salaryArr = Object.values(jsonParams.salary)
        state.nationalArr = Object.values(jsonParams.national)
        state.carArr = Object.values(jsonParams.car)
        state.houseArr = Object.values(jsonParams.house)
        state.spendArr = Object.values(jsonParams.spend)
        state.smokingArr = Object.values(jsonParams.smoking)
        state.drinkingArr = Object.values(jsonParams.drinking)
        state.dialogFormVisible = true
      }

      const close = () => {
        state['formRef'].resetFields()
        state.cascaderone = ''
        state.cascadertwo = ''
        state.areaOneArr = []
        state.areaTwoArr = []
        state.dialogFormVisible = false
      }
      const submitForm = (formName) => {
        state[formName].validate(async (valid) => {
          if (valid) {
            const { msg } = await doInsert(state.baseForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      const resetForm = (formName) => {
        state.cascaderone = ''
        state.cascadertwo = ''
        state.areaOneArr = []
        state.areaTwoArr = []
        state[formName].resetFields()
      }

      return {
        ...toRefs(state),
        handleChangeOne,
        handleChangeTwo,
        showEdit,
        close,
        submitForm,
        resetForm,
      }
    },
  })
</script>
<style lang="scss">
  .index-container {
    .el-drawer__header {
      height: 50px;
      padding: 0px 20px;
      margin-bottom: 0px;
      color: #000000;
      background-color: rgb(245, 245, 245);
    }

    .el-drawer__footer {
      text-align: center;
    }

    .content {
      .el-form-item__label {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto; /* 或者你需要的高度 */
      }
      .el-form-item__content {
        line-height: 25px;
      }
    }
  }
</style>
